<template>
	<view class="container">
		<view class="map-container">
			<embed class="native-map" tag="map" :options='options' @markertap='onMarkerTap'></embed>
		</view>

	</view>
</template>

<script>
import "@/uni_modules/native-harmony-map";
export default {
  data() {
    return {
      options: {
        latitude: 22.5431,
        longitude: 114.0579,
        scale: 12,
        circles: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
            color: 0xffff0000, 
            fillColor: 0xff00ffff, 
            radius: 80,
            strokeWidth: 10,
          },
        ],
        markers: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
 
          },
        
        ],
      },
    };
  },
  methods: {
    onMarkerTap(e) {
      console.log("onMarkerTap", e);
      uni.showToast({
        title: `点击了标记点 ${e.detail.markerId}`,
        icon: 'none'
      });
    },
  },
};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.map-container {
		width: 100%;
		height: 70%;
		margin-bottom: 20px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	
	.native-map {
		width: 100%;
		height: 100%;
	}
	

</style>
